<script setup>

</script>

<template>
  <div class="footer">
    <div class="footer-nav">
      <div class="container">
        <ul class="footer-nav-list">
          <li class="footer-nav-item"><h2 class="nav-title">CLUBS</h2></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Fashion</a></li>
        </ul>
        <ul class="footer-nav-list">
          <li class="footer-nav-item"><h2 class="nav-title">About us</h2></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Delivery</a></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Legal Notice</a></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Terms and Conditions</a></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">About us</a></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Secure Payment</a></li>
        </ul>

        <ul class="footer-nav-list">
          <li class="footer-nav-item"><h2 class="nav-title">Services</h2></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Prices Drop</a></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">New Products</a></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Best Sales</a></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Contact us</a></li>
          <li class="footer-nav-item"><a href="#" class="footer-nav-link">Sitemap</a></li>
        </ul>

        <ul class="footer-nav-list">
          <li class="footer-nav-item"><h2 class="nav-title">Contact</h2></li>
          <li class="footer-nav-item flex">
            <div class="icon-box">
              <ion-icon name="location-outline"></ion-icon>
            </div>

            <address class="content">
              419 State 414 Rte
              Beaver Dams, New York(NY), 14812, USA
            </address>
          </li>
          <li class="footer-nav-item flex">
            <div class="icon-box">
            </div>
          </li>
          <li class="footer-nav-item flex">
            <div class="icon-box">
              <ion-icon name="mail-outline"></ion-icon>
            </div>
            <a href="" class="footer-nav-link">example@gmail.com</a>
          </li>
        </ul>
        <ul class="footer-nav-list">
          <li class="footer-nav-item"><h2 class="nav-title">Follow Us</h2></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.footer {
  background-color: #fff;
  color: #000;
}

.footer-nav {
  border-bottom: 1px solid #ccc; /* 你可以根据需要调整边框颜色 */
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 50px;
  column-gap: 40px;
  max-width: 980px;
  margin: auto;
}

.footer-nav-list:not(:last-child) {
  min-width: calc(20% - 16px);
  width: calc(20% - 16px);
  margin-bottom: 0;
}

.footer-nav-item {
  padding: 3px 0;
}

.footer-nav .nav-title {
  position: relative;
  color: #000; /* 字体颜色设置为黑色 */
  font-size: var(--fs-7);
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-bottom: 5px;
}

.footer-nav-link {
  color: #000; /* 链接字体颜色设置为黑色 */
}
</style>
